<template>
  <div class="user-add-or-update">
    <el-drawer :title="this.rowData ? '编辑群聊' : '新增群聊'" :visible.sync="drawer" custom-class="demo-drawer" direction="rtl" size="60%">
      <div class="demo-drawer__content">
        <div :style="cardHeightStyle" class="rightScrollNone">
          <el-form size="mini" :model="dataForm" :rules="rules" ref="vendorRuleForm">
            <el-row>
              <el-col :span="24">
                <el-form-item :label-width="formLabelWidth" label="群聊名称" prop="name">
                  <el-input autocomplete="off" type="text" v-model="dataForm.name"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item :label-width="formLabelWidth" label="群聊介绍" prop="introduce">
                  <el-input autocomplete="off" type="textarea" v-model="dataForm.introduce"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item :label-width="formLabelWidth" label="所属小程序" prop="cate__project__name">
                  <el-select v-model="dataForm.cate__project__name" placeholder="请选择" style="width: 100%" @change="wxproject1">
                    <el-option v-for="(item, index) in project" :key="index" :label="item.key" :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item :label-width="formLabelWidth" label="群聊类型" prop="cate__name">
                  <el-select v-model="dataForm.cate__name" placeholder="请选择" style="width: 100%" filterable>
                    <el-option v-for="(item, index) in cate" :key="index" :label="item.key" :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item :label-width="formLabelWidth" label="排序值" prop="sort">
                  <el-input autocomplete="off" type="Number" v-model="dataForm.sort" oninput="if(value){value=value.replace(/[^\d]/g,'')} if(value<=0){value=''} if(value>65535){value=65535}"></el-input>
                </el-form-item>
              </el-col>
              <!-- dataForm.sort -->
              <el-col :span="24">
                <el-form-item :label-width="formLabelWidth" label="最大群成员人数" prop="limit_number">
                  <el-input autocomplete="off" type="text" v-model="dataForm.limit_number" :max="500" maxlength="3"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item :label-width="formLabelWidth" label="是否启用" prop="status">
                  <el-radio-group v-model="dataForm.status">
                    <el-radio :label="1" :chacked="dataForm.status">启用</el-radio>
                    <el-radio :label="0" :chacked="!dataForm.status">停用</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="demo-drawer__footer">
          <el-button size="mini" @click="cancelForm">取 消</el-button>
          <el-button size="mini" :loading="loading" @click="dataFormSubmit" type="primary">确定</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import { noticebase, cate_select, group_add, group_edit } from '@/api/wxapplet/index.js'

export default {
  data() {
    return {
      timeOutCount: 0,
      showNumInput: false,
      refNum: 0,
      dataForm: {
        id: '',
        name: '', // 用户名
        introduce: '',
        cate__name: '',
        cate__project__name: '',
        cate__project_id: '',
        sort: '',
        limit_number: '500',
        status: 1,
        cate_id: '',
      },
      project: [],
      cate: [],
      rowData: null,
      formLabelWidth: '150px',
      loading: false,
      drawer: false,
      rules: {
        name: [{ required: true, message: '群聊名称不能为空', trigger: 'blur' }],
        cate__project__name: [{ required: true, message: '所属小程序不能为空', trigger: 'blur' }],
        cate__name: [{ required: true, message: '群聊类型不能为空', trigger: 'blur' }],
        sort: [{ required: true, message: '排序值不能为空', trigger: 'blur' }],
        limit_number: [{ required: true, message: '最大群成员人数不能为空', trigger: 'blur' }],
        status: [{ required: true, message: '是否启用不能为空', trigger: 'change' }],
      },
    }
  },

  mounted() {
    noticebase({}).then((res) => {
      // 所属小程序
      this.project = res.data.project
    })
  },
  computed: {
    cardHeightStyle() {
      let documentClientHeight = document.body.clientHeight
      const height = documentClientHeight - 80 - 80
      return {
        height: height + 'px',
        'overflow-y': 'scroll',
        'padding-right': '20px;',
      }
    },
  },
  methods: {
    // 选择所属小程序
    wxproject1(val) {
      this.dataForm.cate__name = ''
      let info = {
        project_id: val,
      }
      const formData = new FormData()
      for (let key in info) {
        formData.set(key, info[key])
      }
      this.gainwxList(formData)
    },
    gainwxList(data) {
      cate_select(data).then((res) => {
        // 群聊类型
        console.log((this.cate__name = ''))
        this.cate = res.data.project
      })
    },
    // 编辑
    Edit(params) {
      return group_edit(params)
        .then((res) => {
          if (res.code == 200) {
            this.$message.success('保存成功')
          }
        })
        .catch((res) => {
          this.$message.error('保存失败')
        })
    },
    // 新增
    Add(params) {
      return group_add(params)
        .then((res) => {
          if (res.code == 200) {
            this.$message.success('保存成功')
          }
        })
        .catch((res) => {
          this.$message.error('保存失败')
        })
    },
    //   提交
    dataFormSubmit() {
      this.$refs.vendorRuleForm.validate((flag) => {
        if (flag) {
          const data = this.dataForm

          if (this.rowData != null) {
            data.cate_id = data.cate__name == this.rowData.cate__name ? data.cate_id : data.cate__name
            data.project_id = data.cate__project__name == this.rowData.cate__project__name ? data.cate__project_id : data.cate__project__name
          } else {
            data.cate_id = data.cate__name
            data.project_id = data.cate__project__name
          }

          const info = Object.assign(data)
          const formData = new FormData()
          for (let key in info) {
            formData.set(key, info[key])
          }
          console.log(data)

          var request = this.rowData ? this.Edit(formData) : this.Add(formData)
          request
            .then((d) => {
              this.$refs.vendorRuleForm.resetFields()
              this.cancelForm()
              this.$emit('refreshList')
            })
            .catch((d) => {
              this.cancelForm()
            })
        }
      })
    },
    //   关闭弹出层
    cancelForm() {
      this.cleanInfo()
      this.loading = false
      this.drawer = false
    },
    //   打开弹出层
    open(row, role) {
      if (this.drawer) {
        return
      }
      console.log(row)
      this.rowData = row || null
      this.drawer = true
      this.openHook()
      // this.getshcoolselect()
    },
    clearData() {
      this.$refs.vendorRuleForm.resetFields()
    },
    cleanInfo() {
      clearTimeout(this.timeOutCount)
    },
    //   回显
    openHook() {
      this.$nextTick((a) => {
        this.showNumInput = false
        this.refNum = 60 * 5 + 1
        this.clearData(this.rowData)

        if (this.rowData) {
          // 修改
          for (let key in this.dataForm) {
            this.dataForm[key] = this.rowData[key]
          }
          let info = {
            project_id: this.dataForm.cate__project_id,
          }
          const formData = new FormData()
          for (let key in info) {
            formData.set(key, info[key])
          }
          this.gainwxList(formData)
        } else {
          this.loading = false
        }
      })
    },
  },
}
</script>
<style lang="scss">
.user-add-or-update {
  .el-tag {
    position: relative;
    right: 5px;
    z-index: 1;
    height: 40px;
    line-height: 40px;
    border-radius: 0 5px 5px 0;
    padding-left: 15px;
  }

  .my-email {
    .el-input__inner {
      border-radius: 5px 0 0 5px;
    }
  }
}

/*

  */

.fileInput {
  padding-right: 0;
}
</style>
